昨天學會了用ngrok把本地的網站公開到外部。今天要更進一步學習如何利用這個特性來進行跨裝置測試,也就是讓手機、平板、甚至別台電腦,都能直接開啟你在自己電腦上開發的網站。
為什麼需要跨裝置測試?
當我們在開發網頁時,常常會遇到這些問題:
在電腦上看起來完美,但手機畫面跑版。
不同裝置(Android/iPhone)的字體、按鈕大小、比例都不一樣。
想用實體手機測試RWD(響應式設計)時,卻打不開localhost網站。
這時候ngrok就能幫上大忙
因為它會幫我們建立一個從外部也能存取的網址,任何連上網路的裝置都能打開。
實作步驟
首先要先建立一個HTML檔案,先在桌面上建立一個資料夾,然後在資料夾裡新增一個文字文件,打開文字文件後將程式碼打上去然後存為index檔(存檔時不要存為txt檔),接下來開啟VS Code將剛剛儲存的index檔打開然後執行看看

可以執行後開啟cmd輸入python -m http.server 8000,這會啟動一個在 http:/ /localhost:8000 的網站
然後在開啟另一個cmd輸入ngrok http 8000,然後會跑出下圖紅框內的網址
然後用手機打開網址看頁面能不能跑出來,直向和橫向分別會有不同的顏色方塊

可以跑出來就代表成功了👍